// 保存菜单item相关状态
let menuItemEntryClass = '.menu-item'
let currentMenuItemText = ''

// 保存结果item相关状态
const type = {'append':'append', 'before':'item-before', 'after':'item-after', 'edit':'item-edit', 'del': 'item-del'}
const defaultOperationType = 'append'
const switchClassName = 'switch-background-color'
let resultItemRootMountPointId = '#result-body' // 追加dom元素根挂载点
let pointer = ''
let currentOperationType = defaultOperationType
let resultItemObj = {}

window.onload = function () {
    /**
     * 处理点击菜单项，通过class绑定事件
     */
    $(menuItemEntryClass).click(function () {
        currentMenuItemText = $(this).text() + ','
        handleClickMenuItemClass()
        currentMenuItemText = ''
        println()
    })
}

/**
 * 处理点击菜单项，通过函数调用的方式
 * @param text
 */
function handleClickMenuItem(text) {
    currentMenuItemText = text + ','
    handleClickMenuItemClass()
    currentMenuItemText = ''
    println()
}

function handleClickMenuItemClass() {
    switch (currentOperationType) {
        case type['append']:
            let resultItemDomObj = createResultItemDom();
            resultItemObj[resultItemDomObj['id']] = resultItemDomObj['menuItemText']
            $(resultItemRootMountPointId).append(resultItemDomObj['resultItem'])
            break
        case type['edit']:
            resultItemObj[pointer] = currentMenuItemText
            $(`#${pointer}`).text(currentMenuItemText)
            break
        default:
            break
    }
}

/**
 * 处理点击结果项
 * @param id
 */
function handleClickResultItem(id) {
    // 点击的当前元素
    if (id === pointer) {
        $(`#${id}`).removeClass(switchClassName)
        pointer = ''
        switch (currentOperationType) {
            case type['edit']:
                currentOperationType = defaultOperationType
                break
            default:
                $(`#${id}op`).slideToggle()
                break
        }
        return
    }
    // 操作上次点击的元素
    if (pointer !== '') {
        $(`#${pointer}`).removeClass(switchClassName)
        $(`#${pointer}op`).slideUp()
    }
    // 操作本次点击的元素
    pointer = id
    let that = $(`#${pointer}`)
    that.addClass(switchClassName)
    $(`#${pointer}op`).slideDown()
}

/**
 * 处理点击结果操作项
 * @param type
 */
function handleClickResultItemOperation(type) {
    currentOperationType = type
    handleClickResultItemOpItemClass()
}

function handleClickResultItemOpItemClass() {
    let resultItemDomObj = createResultItemDom();

    switch (currentOperationType) {
        case type['before']:
            $(`#${pointer}div`).before(resultItemDomObj['resultItem'])
            resultItemObj[resultItemDomObj['id']] = ' '
            currentOperationType = defaultOperationType
            console.log(resultItemObj)
            break
        case type['after']:
            $(`#${pointer}div`).after(resultItemDomObj['resultItem'])
            resultItemObj[resultItemDomObj['id']] = ' '
            currentOperationType = defaultOperationType
            break
        case type['edit']:
            $(`#${pointer}op`).slideUp()
            break
        case type['del']:
            $(`#${pointer}div`).remove()
            delete resultItemObj[pointer]
            currentOperationType = defaultOperationType
            pointer = ''
            break
        default:
            break
    }
}

function createResultItemDom() {
    let menuItemText = currentMenuItemText
    let id = 'aden' + new Date().getTime()
    let resultItem =
        `
        <div style="display: inline-block" id="${id}div" class="result-item-div">
            <span class="result-item" id="${id}" onclick="handleClickResultItem(this.id)">${menuItemText}</span>
            <div class="result-item-op" id="${id}op">
                <div id="item-before" class="result-item-op-item" onclick="handleClickResultItemOperation(this.id)">前置添加</div>
                <div id="item-after" class="result-item-op-item" onclick="handleClickResultItemOperation(this.id)">后置添加</div>
                <div id="item-edit" class="result-item-op-item" onclick="handleClickResultItemOperation(this.id)">修改</div>
                <div id="item-del" class="result-item-op-item" onclick="handleClickResultItemOperation(this.id)">删除</div>
            </div>
        </div>
        `

    return {menuItemText, id, resultItem}
}

/**
 * 获取拼接的结果集
 */
function getResult() {
    return $(resultItemRootMountPointId).find('.result-item').text();
}

/*开发阶段函数 start*/
function seeResult() {
    let result = getResult()
    $('#result-display').text(result)
}

/**
 * 打印数据，开发阶段观察数据
 */
function println() {
    console.log(`pointer: ${pointer}`)
    console.log(`currentOperationType: ${currentOperationType}`)
    console.log(resultItemObj)
}
/*开发阶段函数 end*/
